<script setup>
import {ref} from "vue";
import AircraftContent from "./AircraftContent.vue";
import Target from "./Target.vue";

const activeTab = ref('aircraftSettings');
</script>

<!--StrikeContent主体内容-->
<!--分为左右两部分，-->
<!--左边：一个下拉框和导航栏，点击导航栏出现对应内容（保存在StrikeContent目录下）-->
<!--右边：Target组件-->
<template>
  <div id="strikeContent">
    <el-row>
      <!--左边-->
      <el-col :span="12">
        <!--顶部下拉框-->
        <div class="MissDR-dropdown">
          <div style="display:inline-block; margin:0 5px;">
            Mission triggers when contact is minimum:
          </div>
          <select class="MissDR-dropdown-option">
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
          </select>
        </div>

        <!--导航-->
        <div class="navBar">
          <!-- 第一个导航链接 -->
          <div class="navLink"
               @click="activeTab = 'aircraftSettings'"
               :class="{ 'active': activeTab === 'aircraftSettings' }">
            Aircraft settings
          </div>

          <!-- 第二个导航链接 -->
          <div class="navLink"
               @click="activeTab = 'shipSubmarineSettings'"
               :class="{ 'active': activeTab === 'shipSubmarineSettings' }">
            Ship/submarine settings
          </div>
        </div>

        <!--点击导航栏时出现的主体内容-->
        <div class="tabContent">
          <!-- Aircraft settings标签页的内容 -->
          <div v-if="activeTab === 'aircraftSettings'">
            <AircraftContent/>
          </div>

          <!-- shipSubmarineSettings标签页的内容 -->
          <div v-if="activeTab === 'shipSubmarineSettings'">
            <span>222</span>
          </div>
        </div>
      </el-col>

      <!--右边-->
      <el-col :span="12">
        <Target/>
      </el-col>
    </el-row>

  </div>
</template>

<style>
/*下拉框*/
.MissDR-dropdown {
  display: flex;
  align-items: center;
  font-size: 10px;
}

.MissDR-dropdown-option {
  width: 25%;
  padding: 0 5px;
  font-size: 10px;
  background: radial-gradient(#1a1a1a, #242424);
  color: white;
  border: none;
}

.MissDR-dropdown-option:focus {
  background: #1f1f1f;
  color: white;
}

</style>
